<template>
    <div>
        <header class="head-nav">
            <el-row>
                <el-col :span="4" class='logo'>
                    <img src="../assets/logo.png" alt="">
                </el-col>
                <el-col :span="16">
                    <el-menu theme="dark" :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
                        <el-menu-item index="1">处理中心</el-menu-item>
                        <el-menu-item index="2">工作台</el-menu-item>
                        <el-menu-item index="3">订单管理</el-menu-item>
                    </el-menu>
                </el-col>
                <el-col :span="4" class="userinfo">
                    <span class="username">
                        <el-dropdown trigger="click">
                            <span class="el-dropdown-link">
                                {{this.$store.state.name}}<i class="el-icon-caret-bottom el-icon--right"></i>
                            </span>
                            <el-dropdown-menu slot="dropdown">
                                <router-link to="/editinfo"><el-dropdown-item>修改信息</el-dropdown-item></router-link>
                                <router-link to="/updatepass"><el-dropdown-item>修改密码</el-dropdown-item></router-link>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </span>
                    <i class="icon iconfont icon-logout" @click='logout()'></i>
                </el-col>
            </el-row>
        </header>
    </div>
</template>
<script>
import {mapGetters,mapActions} from 'vuex';
    export default {
        data() {
            return {
                activeIndex: '1',
            }
        },
        methods: {
            ...mapActions(['updatedlogin','setPass','setName']),
            handleSelect(key, keyPath) {
                console.log(key, keyPath);
            },
            logout(){
                this.$confirm('你确定要退出登录吗？','确定退出',{
                    confirmButtonText:'确定',
                    cancelButtonText:'取消',
                    type:'warning'
                }).then(()=>{
                    this.setName('');
                    this.setPass('');
                    this.$router.push('/login');
                    this.updatedlogin(false);
                    
                })
            }
        },
    }
</script>
<style scoped lang="scss">
    .logo{
        height:60px;
        img{
            height:50px;
            width:auto;
            margin-left:30px;
            margin-top:5px;
            border-radius: 50%;
        }
    }
    .head-nav{
        width:100%;
        height:60px;
        background:#324057;
        position:fixed;
        top:0px;
        left:0px;
        z-index:99;
        color:#fff;
        border-bottom:1px solid #1f2d3d;
    }
    .username{
        height:60px;
        line-height:60px;
        cursor:pointer;
        span{
            color:white;
        }
        margin-right:20px;
    }
    .userinfo{
        text-align:right;
        padding:0 20px 0 0;
        cursor:pointer;
    }
</style>